<template>
  <div>
    <!-- 报名按钮 -->
    <Button type="primary" @click="openModal">报名</Button>

    <!-- 弹窗 -->
    <Modal
      v-model="visible"
      title="报名活动"
      width="900"
      :closable="true"
      :mask-closable="false"
      @on-ok="handleSubmit"
    >
      <h3>选择商品并配置 SKU</h3>
      <Table
        border
        :columns="goodsColumns"
        :data="goodsList"
        @on-selection-change="onGoodsSelect"
      >
        <!-- 展开行，显示SKU -->
        <template slot="expand" slot-scope="{ row }">
          <div v-if="row.skuList && row.skuList.length">
            <Table :columns="skuColumns" :data="row.skuList" border size="small">
              <template slot-scope="{ row: sku }" slot="activity_price">
                <Input v-model="sku.activity_price" placeholder="活动价" size="small" />
              </template>
              <template slot-scope="{ row: sku }" slot="activity_stock">
                <Input v-model="sku.activity_stock" placeholder="活动库存" size="small" />
              </template>
            </Table>
          </div>
        </template>
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "SignupModal",
  data() {
    return {
      visible: false,
      goodsList: [
        {
          id: 1,
          name: "商品A",
          thumb: "https://via.placeholder.com/50",
          price: 100,
          skuList: [
            { id: "SKU1", spec: "M", price: 100, activity_price: "", activity_stock: "" },
            { id: "SKU2", spec: "L", price: 120, activity_price: "", activity_stock: "" }
          ]
        },
        {
          id: 2,
          name: "商品B",
          thumb: "https://via.placeholder.com/50",
          price: 200,
          skuList: [
            { id: "SKU3", spec: "S", price: 200, activity_price: "", activity_stock: "" },
            { id: "SKU4", spec: "XL", price: 220, activity_price: "", activity_stock: "" }
          ]
        }
      ],
      selectedGoods: [],
      goodsColumns: [
        { type: "selection", width: 60, align: "center" },
        { type: "expand", width: 60, align: "center" },
        { title: "ID", key: "id", width: 80 },
        { title: "商品名", key: "name" },
        {
          title: "缩略图",
          key: "thumb",
          render: (h, params) => {
            return h("img", {
              attrs: { src: params.row.thumb, width: "40" }
            });
          }
        },
        { title: "价格", key: "price" }
      ],
      skuColumns: [
        { title: "SKU ID", key: "id", width: 80 },
        { title: "规格", key: "spec", width: 100 },
        { title: "原价", key: "price", width: 100 },
        { title: "活动价", key: "activity_price", slot: "activity_price" },
        { title: "活动库存", key: "activity_stock", slot: "activity_stock" }
      ]
    };
  },
  methods: {
    openModal() {
      this.visible = true;
    },
    onGoodsSelect(selection) {
      this.selectedGoods = selection;
    },
    handleSubmit() {
      if (!this.selectedGoods.length) {
        this.$Message.error("请选择至少一个商品");
        return;
      }
      for (let goods of this.selectedGoods) {
        if (
          goods.skuList.some(sku => !sku.activity_price || !sku.activity_stock)
        ) {
          this.$Message.error(`商品【${goods.name}】SKU 信息未填写完整`);
          return;
        }
      }
      const payload = this.selectedGoods.map(g => ({
        id: g.id,
        name: g.name,
        skus: g.skuList
      }));
      console.log("提交数据:", payload);
      this.$Message.success("报名成功！");
      this.visible = false;
    }
  }
};
</script>
